<script setup>
// 状态仓库
// 1.为什么要有状态仓库？
// 因为组件化的项目中会存在很多数据在多个组件里使用，这些数据使用传统的父子通讯，耦合性太高
// 难以维护。这个时候可以由第三方生成一个空的状态仓库，所有可能会用到的共享数据全部存放在仓库中，
// 组件直接从仓库中取数据，或直接通知仓库修改数据即可
// vue2中的一个典型方案就是vuex，vue3中是的典型方案是pinia
// 2.pinia什么时候用到状态仓库，什么时候不建议使用
// 如果项目中多个组件用到相同的数据了，此时建议把该数据保存到pinia仓库中，
// 如果某数据只在一个组件中使用到，不建议使用pinia
// 3.pinia几个核心概念
// 每个defineStore都是一个独立的模块仓库
// defineStore有两个参数，仓库的id名，配置项对象
// 每个配置对象有三个核心概念：state，getters，actions
// 其中state就是仓库中存放数据的位置，getters就是仓库中的计算属性，actions存放的是仓库中修改数据的方法
import { computed } from "vue";
import { useCounterStore } from "./stores/counter";
import Table from "./pages/Table.vue";
import KA from "./pages/KA.vue";
import KA2 from "./pages/KA2.vue";
const store = useCounterStore();
// 组件本身没有该数据，是从外部获取到的数据，建议使用computed属性
const name = computed(() => store.name);
const updateName = () => {
  // 更简单
  // store.name='666'
  // 更规范
  // store.updateName('555')
  // 适合批量修改数据
  // store.$patch({
  //   count:store.count+10
  // })
};
</script>

<template>
  <div>{{ name }}</div>
  <button @click="updateName">改名</button>
  <div>
    <Table />
  </div>
  <!-- KeepAlive -->
  <KeepAlive> <KA /> </KeepAlive><br>
  <KA2 />
</template>

<style scoped></style>
